<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CeMberuS - Styleguide</title>
        
        <!-- begin stylsheets -->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" media="all">
        <link type="text/css" rel="stylesheet" href="media/css/default.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/cemberus.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/layout.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/text.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/button.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/lists.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/forms.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/boxes.css" media="all" />
        
        <!-- syntaxhighlighting -->
        <script type="text/javascript" src="media/js/shCore.js"></script>
        <script type="text/javascript" src="media/js/shBrushJScript.js"></script>
        <link type="text/css" rel="stylesheet" href="media/css/shCoreDefault.css"/>
        <link type="text/css" rel="stylesheet" href="media/css/shThemeEclipse.css"/>
        <script type="text/javascript">SyntaxHighlighter.all();</script>
        
    </head>
    
    <body class="start">
        <div id="page">
            <div id="header">
                <div id="logo">
                    <h1><a href="./" title="CeMberuS Startseite Styleguide">CeMberuS - Styleguide</a></h1>
                </div>
                <div id="menu">
                    <ul id="navigation" class="js-nav clearfix">
                        <li><a href="./" title="CeMberuS Startseite" class="first">Startseite</a></li>
                        <li><a href="text.html" title="CeMberuS Textauszeichnung" class="active">Textauszeichnung</a></li>
                        <li><a href="button.html" title="CeMberuS Button Styles">Buttons</a></li>
                        <li><a href="boxes.html" title="CeMberuS Boxes Styles" class="last">Boxes</a></li>
                    </ul>
                    <div id="search">
                        <form id="searchform" method="get" action="">
                            <fieldset>
                                <legend>CeMberuS Suchformular</legend>
                                <input id="searchinput" type="text" value="suchen..." />
                                <input id="searchbutton" type="button" value="" />
                                <div class="clear"> </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="clear"> </div>
                </div>
            </div>
            <div id="content-header"> </div>
            <div id="content">
                <div id="content-area">
                    <div id="breadcrumbs">
                        <p><a href="./" title="CemBeruS Styleguide">CeMberuS</a><span class="sep"></span>Textauszeichnung</p>
                    </div>
                    <div class="entry">
                        <h2>1. Allgemeine Informationen</h2>
                        <p>Dieses Dokument beschreibt den Styleguide für das CMS <strong>CeMberuS</strong>. Diese Unterseite richtet sich der Textauszeichnung zu. Es stehen alle Elemente zur Verfügung, mit der Ausnahme des <code>&lt;h1&gt;</code>-Tags. Dieses wird nur, wirklich nur für das Logo verwendet, da Suchmaschinen mit dem <code>&lt;h1&gt;</code>-Tag nichts anfangen. Soll heißen, das erste Überschriften Element ist <code>&lt;h2&gt;</code> und geht bis <code>&lt;h6&gt;</code>.</p>
                        <p>Zusätzlich zu den normalen Überschriften Elementen, stehen die Klassen <code>&lt;div class="h1"&gt;</code> bis <code>&lt;div class="h6"&gt;</code>, für Suchmaschinenoptimierung bereit. Genauso wie die Klasse <code>&lt;span class="strong"&gt;</code> für Fettschrift, <code>&lt;span class="italic"&gt;</code> für Kursivtext und <code>&lt;span class="underline"&gt;</code> für unterstrichenen Text. Achtung! Selbstverständlich sind die normalen HTML Elemente für Fettschrift, Kursivtext und Unterstrichenen Text nutzbar, jedoch in Verbindung mit Suchmaschinenoptimierung.</p>
                        <p>Für die einzelnen Elemente bitte in die entsprechenden CSS Dateien einen Blick werfen. Für mehr Informationen, Bugs oder Verbesserungsvorschläge bitte eine E-Mail an <a href="mailto:cemberus@gironimo.org" title="E-Mail an das CeMberuS Team">kontakt@gironimo.org</a> schicken.</p>
                        <h2>2. Text</h2>
                        <p>Die Textausrichtung sollte wenn möglich immer <strong>linksbündig</strong> sein, da rechtsbündiger Text schwer lesbar ist und Blocksatz in HTML nicht gut implementiert wurde. Zudem wird die Hauptzielgruppe von CeMberuS von links nach rechts lesen, und von daher linksbündiger Text viel einfacher gelesen werden kann.</p>
                        <p>Die Standardfarbe für Text besitzt den Hexwert <code>#201F1F</code>. Die Überschriften haben den Hexwert <code>#111111</code>. Farbe für einzeiligen Code hat den Hexwert <code>#6F0D0D</code>, andere Farbwerte sind noch nicht beschlossen.</p>
                        <p>Ein Paragraph hat einen Abstand von <code>0.6em</code> oben und unten. Überschriften besitzen, sofern nicht anderweitig festgelegt <code>0.8em</code>. Die Zeilenhöhe hat einen festen Wer von <code>1.5</code>. Als Schriftart wird die von Google entwickelte und über Stylesheets bzw. <code>&lt;link /&gt;</code>-Element einbindbare Schrift <strong>Droid Sans</strong> verwendet. Als Schriftgröße wurde <code>1.3em</code> definiert das entspricht nach den eingestellten CSS Regeln <code>13px</code>.</p>
                        <h3>2.1 rechtsbündig</h3>
                        <p class="right"><span class="italic">Aufruf mit <code>&lt;p class="right"&gt;</code>.</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        <h3>2.2 Blocksatz</h3>
                        <p class="justify"><span class="italic">Aufruf mit <code>&lt;p class="justify"&gt;</code>.</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        <h3>2.3 linksbündig</h3>
                        <p><span class="italic">Aufruf mit <code>&lt;p&gt;</code>.</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        <h3>2.4 Fettschrift</h3>
                        <p>Fettschrift wird entweder mit <code>&lt;strong&gt;</code> oder mit der Klasse <code>&lt;span class="strong"&gt;</code> erzeugt. Das normale und semantisch korrekte HTML Element wird für wichtige Keywords verwendet, da dieses Element von Suchmaschinen höher gewertet wird als normaler Text. Die strong-Klasse wird eingesetzt wenn das Layout Fettschrift verlangt, dies aber sinnlos für die Suchmaschinenoptimierung wäre.</p>
                        <h3>2.5 Kursivtext, Unterstreichung und Text durchstreichen</h3>
                        <p>Normaler HTML Aufruf oder durch die Klassen Elemente <code>&lt;span class="italic"&gt;</code>, <code>&lt;span class="underline"&gt;</code> bzw. <code>&lt;span class="strike"&gt;</code>. Für Verwendung siehe Punkt 2.4 (Fettschrift).</p>
                        <h2>3. Überschriften</h2>
                        <p>siehe großteils erster Absatz (Punkt 1). Überschriften sehen am Ende, sofern nicht explizit anders konfiguriert so aus:</p>
                        <div class="h1">Überschrift Ebene 1</div>
                        <div class="h2">Überschrift Ebene 2</div>
                        <div class="h3">Überschrift Ebene 3</div>
                        <div class="h4">Überschrift Ebene 4</div>
                        <div class="h5">Überschrift Ebene 5</div>
                        <div class="h6">Überschrift Ebene 6</div>
                        <h2>4. Spalten Layouts</h2>
                        <h3>4.1 zwei Spalten</h3>
                        <div class="one-half">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="one-half last">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="clear"> </div>
                        <h3>4.2 drei Spalten</h3>
                        <div class="one-third">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="one-third">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="one-third last">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="clear"> </div>
                        <h3>4.3 vier Spalten</h3>
                        <div class="one-fourth">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="one-fourth">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="one-fourth">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="one-fourth last">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="clear"> </div>
                        <h2>5. Links</h2>
                        <p>Es wird unterschiedliche Linkarten geben. Links innerhalb von CeMberuS und Links die auf externe Seiten verweisen. Der Farbwert ist <code>#00840A</code>.</p>
                        <h3>5.1 CeMberuS Links</h3>
                        <p>Lorem ipsum dolor sit amet, <a href="#" title="">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                        <h3>5.2 externe Links</h3>
                        <p>Lorem ipsum dolor sit amet, <a href="#" title="" class="external">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Aufgerufen wird ein externer Link durch <code>&lt;a href="" title="" class="external"&gt;</code>.</p>
                        <h2>6. Codeboxen</h2>
                        <h3>6.1 einzeiliger Code</h3>
                        <p>Aufruf ganz normaler über <code>&lt;code&gt;</code>.</p>
                        <h3>6.2 mehrzeiliger Code</h3>
                        <p>Vorsicht! Die genaue Spezifikation steht noch nicht fest! Aufruf durch <code>&lt;pre class="brush: js"&gt;</code>.</p>
                        <pre class="brush: js;"> 
                        function sayHello()
                        {
                            return "Hi!";
                        }
                        </pre>
                        <h2>7. Zitate</h2>
                        <p>Zitate werden entweder einzeilig <code>&lt;cite&gt;</code> oder mehrzeilig <code>&lt;blockquote&gt;</code> erzeugt.</p>
                        <h3>7.1 einzeiliges Zitat</h3>
                        <p>Lorem ipsum dolor sit amet, <cite>consetetur sadipscing</cite> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                        <h3>7.2 mehrzeiliges Zitat</h3>
                        <blockquote>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                        </blockquote>
                        <h2>8. Verschiedenes</h2>
                        <p>Beispieltext <code>&lt;samp&gt;</code>, Benutzereingabe <code>&lt;kbd&gt;</code>, variabler Name bzw. Variable <code>&lt;var&gt;</code>, Definition <code>&lt;dfn&gt;</code>, Abkürzung <code>&lt;abbr&gt;</code> und Akronym <code>&lt;acronym&gt;</code>.</p>
                        <h3>8.1 Beispieltext</h3>
                        <p>Dies ist ein <samp>Beispiel</samp>, das genauer Beachtung gewünscht wird.</p>
                        <h3>8.2 Benutzereingabe</h3>
                        <p>Dies ist eine <kbd>Benutzereingabe</kbd>, welche der User mal machen sollte.</p>
                        <h3>8.3 Variable</h3>
                        <p>Dies ist ein <var>variabler</var> Name, der sich ändern könnte.</p>
                        <h3>8.4 Definition</h3>
                        <p><dfn>Meine Aussage</dfn> ist die Definition!</p>
                        <h3>8.5 Akronym</h3>
                        <p>Ein <abbr>LKW</abbr> ist ein Akronym.</p>
                    </div>
                </div>
            </div>
            <div id="content-footer"> </div>
        </div>
    </body>
    
</html>

